<template>
  <div class="state_box">
    <div class="state_list">
      <div class="item_list">
        <div class="item">
          <!-- <div class="title">远程状态:</div> -->
          <div class="title">{{ value1 ? "就地状态" : "远程状态" }}:</div>

          <div class="">
            <el-switch v-model="value1"> </el-switch>
          </div>
        </div>
        <div class="item">
          <div class="title">当前步骤:</div>
          <div class="">3</div>
        </div>
        <div class="item">
          <div class="title">运行时间:</div>
          <div class="">2h5min</div>
        </div>
      </div>
      <div class="item_list">
        <div class="item">
          <div class="title">炉内压力:</div>
          <div>80mPA</div>
        </div>
        <div class="item">
          <div class="title">炉门上锁:</div>
          <div class="state_dot"></div>
        </div>
        <div class="item">
          <div class="title">剩余时间:</div>
          <div>30min</div>
        </div>
      </div>
      <div class="item_list">
        <div class="item">
          <div class="title">炉内高真空:</div>
          <div class="">0mPA</div>
        </div>
        <div class="item">
          <div class="title">排气阀:</div>
          <div class="state_dot" style="background: #f56c6c"></div>
        </div>
        <div class="item">
          <div class="title">氮气充气阀:</div>
          <div class="state_dot" style="background: #f56c6c"></div>
        </div>
      </div>
      <div class="item_list">
        <div class="item">
          <div class="title">炉内低真空:</div>
          <div class="">0mPA</div>
        </div>
        <div class="item">
          <div class="title">氮气分压:</div>
          <div class="state_dot" style="background: #f56c6c"></div>
        </div>
        <div class="item">
          <div class="title">氮气补气阀:</div>
          <div class="state_dot" style="background: #f56c6c"></div>
        </div>
      </div>
    </div>
    <el-dialog
      @close="close1"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div style="margin-bottom: 10px">设置远程上电（小时:分钟）</div>
      <el-time-picker
        size="small"
        class="w100"
        value-format="HH:mm"
        v-model="dataVal1"
        placeholder="设置超温断电时间（分钟）"
      >
      </el-time-picker>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      @close="close2"
      title="提示"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose2"
    >
      <div style="margin-bottom: 10px">请设置超温断电时间（分钟）</div>
      <el-input
        v-model="dataVal2"
        placeholder="请输入超温断电时间"
        size="small"
        clearable
      ></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible2 = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="sumbit2"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataVal1: "",
      dataVal2: "",
      dialogVisible: false,
      dialogVisible2: false,
      timeVal: "",
      value1: false,
      value3Text: "",
      value2Text: "",
      value2: false,
      value3: false,
    };
  },
  methods: {
    close1() {
      this.dataVal1 = "";
      if (!this.value2Text) {
        this.value2 = false;
      }
    },
    close2() {
      this.dataVal2 = "";
      if (!this.value3Text) {
        this.value3 = false;
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleClose2() {
      this.dialogVisible2 = false;
    },
    sumbit() {
      this.value2Text = this.dataVal1;
      this.handleClose();
    },
    sumbit2() {
      this.value3Text = this.dataVal2;
      this.handleClose2();
    },
    changeVal2(val) {
      if (val) {
        this.dialogVisible = true;
      } else {
        this.value2Text = "";
      }
    },
    changeVal3(val) {
      if (val) {
        this.dialogVisible2 = true;
      } else {
        this.value3Text = "";
      }
    },
    promtpVal(key, key2, mes, inputPlaceholder) {
      this.$prompt(mes, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputErrorMessage: mes,
        inputValue: this[key],
        inputPlaceholder: inputPlaceholder,
      })
        .then(({ value }) => {
          this[key] = value;
        })
        .catch(() => {
          if (this[key]) {
          } else {
            this[key2] = false;
          }
        });
    },
  },
};
</script>

<style lang='scss' scoped>
.state_dot {
  background-color: #00cc00;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.state_box {
  border: 1px solid #0da9f2;
  background-color: #081f63;
  padding: 10px;
  /* padding-left: 15px; */
  /* padding-right: 66px; */
  height: 58%;
  .state_list {
    display: flex;
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
    .item_list {
      display: flex;
      /* align-content: center; */
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      position: relative;
      .value_text {
        cursor: pointer;
        font-size: 14px;
        margin-left: 6px;
        color: #0da9f2;
        /* position: absolute; */
        /* bottom: 20px; */
        /* left: 70px; */
      }
    }
    .item {
      display: flex;
      /* margin-bottom: 8px; */
      align-items: center;
      width: 33%;
      .val_icons {
        display: flex;
        align-items: center;
        margin-top: -5px;
        .icon {
          width: 22px;
          height: 22px;
          margin-right: 11px;
          &:last-child {
            margin: 0;
          }
        }
      }
      .val_state {
        width: 42px;
        height: 22px;
        /* background: #52c41a; */
        background: rgba($color: #52c41a, $alpha: 0.6);
        text-align: center;
        line-height: 22px;
        font-size: 12px;
        color: #fff;
        border-radius: 40px;
      }
      .title {
        color: #fff;
        font-size: 16px;
        margin-right: 8px;
      }
    }
  }
}
</style>